<template>
  <!-- 用户资料 -->
  <div class="user-box">
    <!-- 顶部导航 -->
    <van-nav-bar class="page-nev-bar" title="个人中心">
      <van-icon class="left-icon" name="arrow-left" slot="left" @click="$router.go(-1)" />
    </van-nav-bar>

    <input hidden type="file" ref="inp" @change="onInputChange">
    <van-cell title="头像" is-link @click="$refs.inp.click()">
      <van-image round class="avatar" :src="profile.photo" />
    </van-cell>
    <van-cell title="昵称" is-link :value="profile.name" @click="nameEditShow = true"></van-cell>
    <van-cell title="性别" is-link :value="profile.gender === 1 ? '女' : '男'" @click="sexEditShow = true"></van-cell>
    <van-cell title="生日" is-link :value="profile.birthday" @click="birthdayEditShow = true"></van-cell>

    <!-- 编辑昵称弹出层 -->
    <van-popup v-if="nameEditShow" v-model="nameEditShow" position="bottom" :style="{ height: '100%' }">
      <EditName @leftClose="nameEditShow = false" v-model="profile.name"></editName>
    </van-popup>

    <!-- 编辑性别弹出层 -->
    <van-popup v-if="sexEditShow" v-model="sexEditShow" position="bottom">
      <EditSex @closePopup='sexEditShow = false' v-model="profile.gender"></editSex>
    </van-popup>

    <!-- 编辑生日弹出层 -->
    <van-popup v-if="birthdayEditShow" v-model="birthdayEditShow" position="bottom">
      <EditBirthday v-model="profile.birthday" @closePopup="birthdayEditShow = false"></EditBirthday>
    </van-popup>

    <!-- 编辑头像弹出层 -->
    <van-popup v-if="avatarEditShow" v-model="avatarEditShow" position="bottom" :style="{ height: '100%' }">
      <EditAvatar :imgUrl="imgUrl" @closePopup="avatarEditShow = false" @updataSuccess="profile.photo = $event">
      </EditAvatar>
    </van-popup>
  </div>
</template>

<script>
import { getUserprofile } from '@/api/user.js'
// 导入编辑昵称组件
import EditName from './components/edit-name.vue'
// 导入编辑性别组件
import EditSex from './components/edit-sex.vue'
// 导入编辑生日组件
import EditBirthday from './components/edit-birthday.vue'
// 导入编辑头像组件
import EditAvatar from './components/edit-avatar.vue'
export default {
  data () {
    return {
      // 用户资料
      profile: {},
      // 编辑昵称弹出层显示
      nameEditShow: false,
      // 编辑性别弹出层显示
      sexEditShow: false,
      // 编辑生日弹出层显示
      birthdayEditShow: false,
      // 选中的图片
      imgUrl: '',
      // 编辑图片弹出层显示
      avatarEditShow: false
    }
  },
  methods: {
    // 选择头像图片触发
    onInputChange (e) {
      // 通过事件对象获取选择的文件
      const file = e.target.files[0]
      // 把文件转换为url
      const imgUrl = URL.createObjectURL(file)
      this.imgUrl = imgUrl
      this.avatarEditShow = true
      e.target.value = ''
    },
    // 加载用户资料
    async loadUserProfile () {
      try {
        const { data: res } = await getUserprofile()
        this.profile = res.data
      } catch (err) {
        this.$toast('获取个人资料失败')
      }
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {
    EditName,
    EditSex,
    EditBirthday,
    EditAvatar
  },
  created () {
    this.loadUserProfile()
  },
  mounted () { }
}
</script>

<style scoped lang='less'>
.user-box {
  .avatar {
    width: 50px;
    height: 50px;
  }
}
</style>
